<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <title>监控页面</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css">
    <script type="text/javascript" src="../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script src="../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <!--报表-->
    <script type="text/javascript" src="../framework/echarts.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.js"></script>

    <script>

        //回调函数入口
        // $(function () {
        //     loadDATA(option);
        // });


    </script>
</head>

<body >


<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<div id="piechart" style="width: 400px;height:400px;"></div>
<div id="curvechart" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
    // 折线图（最近7天商品流拍数量）
    var XtimeData = [];
    var YauctionData = [];
    var myChart2 = echarts.init(document.getElementById('curvechart'));
    var option2 = {

        backgroundColor: '#FFF0F5',

        title: {
            text: '过去7天流拍商品折线图',
            subtext: '模拟数据111',
            x: 'center'
        },

        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
            data: ['预期', '实际', '假设']
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '16%',   // 等价于 y: '16%'
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
            trigger: 'axis'
        },

        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },

        xAxis: {
            name: '时间',
            type: 'category',
            axisLine: {
                lineStyle: {
                    // 设置x轴颜色
                    color: '#912CEE'
                }
            },
            // 设置X轴数据旋转倾斜
            axisLabel: {
                rotate: 30, // 旋转角度
                interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
            // boundaryGap值为false的时候，折线第一个点在y轴上
            boundaryGap: false,
            data: XtimeData
            //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },

        yAxis: {
            name: '数值',
            type: 'value',
            min: 0, // 设置y轴刻度的最小值
            max: 1800,  // 设置y轴刻度的最大值
            splitNumber: 9,  // 设置y轴刻度间隔个数
            axisLine: {
                lineStyle: {
                    // 设置y轴颜色
                    color: '#87CEFA'
                }
            },
        },

        series: [
            {
                name: '预期',
                data: [820, 932, 301, 1434, 1290, 1330, 1320],
                type: 'line',
                // 设置小圆点消失
                // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                symbol: 'none',
                // 设置折线弧度，取值：0-1之间
                smooth: 0.5,
            },

            {
                name: '实际',
                data: YauctionData,
                //[620, 732, 941, 834, 1690, 1030, 920],
                type: 'line',
                // 设置折线上圆点大小
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        borderColor: 'red',  // 拐点边框颜色
                        lineStyle: {
                            width: 5,  // 设置线宽
                            type: 'dotted'  //'dotted'虚线 'solid'实线
                        }
                    }
                }
            },

            {
                name: '假设',
                data: [120, 232, 541, 134, 290, 130, 120],
                type: 'line',
                // 设置折线上圆点大小
                symbolSize: 10,
                // 设置拐点为实心圆
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        // 拐点上显示数值
                        label: {
                            show: true
                        },
                        lineStyle: {
                            // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                            color: 'rgba(0,0,0,0)'
                        }
                    }
                }
            }
        ],

        color: ['#00EE00', '#FF9F7F', '#FFD700']
    };
    loadDATA2();
    myChart2.setOption(option2);

    //加载option数据
    function loadDATA2() {
        $.ajax({
            //type : "post",
            async: false, //同步执行
            cache: false,
            url: "/web-manage/statistics/auction",
            //data : {},
            dataType: "json",
            success: function (data) {
                alert(111);
                console.log(data);
                var length = data.length;
                for (var i = 0; i < length; i++) {
                    if (data[i]['time'] !== null) {
                        XtimeData.push(data[i]['time'])
                    }
                    if (data[i]['count'] !== null) {
                        YauctionData.push(data[i]['count']);
                    }
                }
            }
        });
    }

    //饼状图 （各种收入金额饼状图）
    var peidata = [];
    // 基于准备好的dom，初始化echarts实例（饼状图，盈利收入类型）
    var myChart1 = echarts.init(document.getElementById('piechart'));
    var option1 = {
        title: {
            text: '最近一周收支统计饼状图',
            top: 'bottom',
            left: 'center',
            textStyle: {
                fontSize: 20,
                fontWeight: 6,
                color: '#333'
            },
        },//标题
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
            /*formatter:function(val){   //让series 中的文字进行换行
                 console.log(val);//查看val属性，可根据里边属性自定义内容
                 var content = var['name'];
                 return content;//返回可以含有html中标签
             },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
        },//提示框，鼠标悬浮交互时的信息提示
        legend: {
            show: false,
            orient: 'vertical',
            x: 'left',
            data: ['50%-学生', '25%-老师', '25%-家长']
        },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配

        series: [
            {
                name: '收入来源',
                type: 'pie',
                radius: '55%',
                data: peidata/*[
                    {value: 235, name: '视频广告'},
                    {value: 274, name: '联盟广告'},
                    {value: 310, name: '邮件营销'},
                    {value: 335, name: '直接访问'},
                    {value: 400, name: '搜索引擎'}
                ]*/
            }
        ]
    };
    loadDATA1();
    myChart1.setOption(option1);

    //加载option数据
    function loadDATA1() {
        $.ajax({
            //type : "post",
            async: false, //同步执行
            cache: false,
            url: "/web-manage/money/type",
            //data : {},
            dataType: "json",
            success: function (data) {
                console.log(data);
                var length = data.length;
                for (var i = 0; i < length; i++) {
                    if (data[i] !== null) {
                        peidata.push(data[i])
                    }

                }
            }
        });
    }

    var xdata = [];
    var ydata = [];

    // 基于准备好的dom，初始化echarts实例(柱状图，盈利收入)
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '最近一周收入(元/日)'
        },
        tooltip: {},
        legend: {
            data: ['营业收入']
        },
        xAxis: {
            data: xdata
            //data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '金额',
            type: 'bar',
            data: ydata,
            //data: [5, 20, 36, 10, 10, 20]
        }]
    };
    loadDATA();
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //加载option数据
    function loadDATA() {
        $.ajax({
            //type : "post",
            async: false, //同步执行
            cache: false,
            url: "/web-manage/money/history",
            //data : {},
            dataType: "json",
            success: function (data) {
                console.log(data);
                /*if (result) {
                    //初始化option.xAxis[0]中的data
                    option.xAxis[0].data=[];
                    for(var i=0;i<result.length;i++){
                        option.xAxis[0].data.push(result[i].x);
                    }
                    //初始化option.series[0]中的data
                    option.series[0].data=[];
                    for(var i=0;i<result.length;i++){
                        option.series[0].data.push(result[i].y);
                    }
                }*/
                var length = data.length;
                for (var i = 0; i < length; i++) {
                    if (data[i]['time'] !== null) {
                        xdata.push(data[i]['time'])
                    }
                    if (data[i]['money'] !== null) {
                        ydata.push(data[i]['money']);
                    }
                }
            }
        });
    }

</script>
<div id="item_box">当前在线拍品数：{{items}}</div>
<div id="onlinepeople">当前在线人数：20000</div>
<script>
    //vue传值（在线拍卖商品数）
    var vm = new Vue({
        el: '#item_box',
        data() {
            return {
                items: null, id: 100,
            }
        },
        methods: {
            init: function () {
                var temp = this;
                axios
                    .get("/web-manage/statistics/online")
                    .then(response => (this.items = response.data))
                    .catch(function (error) { // 请求失败处理
                        alert(error);
                        console.log(error);
                    });
            }
        },
        mounted(){
            this.init();
        }
    })
</script>

</body>
</html>